<script setup lang="ts">
import debounce from "@/utils/debounce";
import { ref } from "vue";
import useOrder from "@/store/order";
const { order } = useOrder();

defineProps(["list"]);
const emit = defineEmits(["cancel", "confirm"]);
const popup = ref();
defineExpose({
  open: () => {
    popup.value.open();
  },
  close: () => {
    popup.value.close();
  }
});

const onPayment = debounce(async (good: any) => {
  order.orderInfo = good;
  uni.navigateTo({
    url: "/pages/shop/index/order_create"
  });
  // await payment(orderId, "/pages/shop/index/order_success");
});
const onDetail = debounce((good: any) => {
  console.log("good.product_id", good.product_id);
  uni.navigateTo({
    url: "/pages/shop/index/goods_info?mid_id=" + good.product_id
  });
});
</script>

<template>
  <uv-popup
    ref="popup"
    zIndex="999"
    mode="bottom"
    bgColor="none"
    :safeAreaInsetBottom="false"
  >
    <view class="car-container">
      <Flex
        class="header"
        justify="space-between"
        customStyle="padding: 20rpx 40rpx;"
      >
        <view class="title">推荐商品</view>
        <view class="close" @click="popup.close"></view>
      </Flex>
      <view class="product-container">
        <Flex
          justify="space-between"
          class="product"
          v-for="(item, index) in list"
          :key="item.product_id"
          @click="onDetail(item)"
          customStyle="background-color: #f9f9f9; border-radius: 20rpx;margin-top: 20rpx;"
        >
          <image
            class="preview"
            mode="widthFix"
            :src="item.thumb || item.cover"
          ></image>
          <view class="info">
            <view class="name">{{ item.name }}</view>
            <Flex justify="space-between">
              <view class="discount">
                ¥{{ item.price }}
                <text v-if="item.original_price" class="old_prize"
                  >¥{{ item.original_price }}</text
                >
              </view>
              <t-button
                class="btn"
                width="120rpx"
                height="64rpx"
                margin="0"
                @click="onDetail(item)"
                >更多详情</t-button
              >
            </Flex>
          </view>
        </Flex>
        <uv-empty
          v-if="!list.length"
          width="168rpx"
          height="168rpx"
          text="暂无推荐商品"
          icon="https://lehuopai-1311286543.cos.ap-guangzhou.myqcloud.com/img/my/icon_empty.png"
        ></uv-empty>
      </view>
    </view>
  </uv-popup>
</template>

<style lang="scss" scoped>
.car-container {
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  // padding: 40rpx 0;
  background: var(--bg-color);
  color: var(--color-text-default);
  .header {
    .close {
      background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_close-1.png");
      width: 56rpx;
      height: 56rpx;
      background-size: cover;
    }
  }
  .info {
    flex: 1;
  }
  .name {
    margin-bottom: 20rpx;
  }
  .product-container {
    height: 880rpx;
    overflow-y: scroll;
    padding: 0 40rpx;
  }
  .product {
    background-color: #f9f9f9;
    border-radius: 20rpx;
    margin-top: 20rpx;
  }
  .btn {
    font-size: 24rpx;
  }
  .discount {
    font-size: 32rpx;
    color: var(--color-text-hight);
  }
  .old_prize {
    color: var(--color-text-assist-1);
    text-decoration: line-through;
    margin-left: 10rpx;
    font-size: 24rpx;
  }
  .preview {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
  }
}
</style>
